<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/sparklines.min.js"></script>
	<script type="text/javascript" src="js/OpenError1.0-minified.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	var oe;
	var map;
	var opts = {'scale_from':undefined};
	var data =[];
	
	function init() {
		var myOptions = {
		  zoom: 5,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  center: new google.maps.LatLng(42, -81)
		}
		map = new google.maps.Map(document.getElementById("map"), myOptions);
			
			
		oe = new OpenError();
		generateNewPoint();
		generateNewPoint();
	}
	
	function generateNewPoint(){
		var point = oe.Random.boxMuller().coordinates;
		document.getElementById("pointText").innerHTML = point[0];
		data.push(point[0]);
		new BarSparkline("sparkline",data,opts).draw();
	}
	</script>
</head>
<body onload="init()">
<h2>Generate Random Points and plot on Sparkline</h2>
<p>Generate a new point using the box muller function and add the x value to a list of data points. It then plots the sparkline.</p>

<div>
	<div id="map" style="width:500px;height: 400px;border: 1px solid black;float: left;">
	</div>
	<div style="margin-left: 500px;">
	Random Point: <span id="pointText"></span><input type="button" value="Add New Point" onclick="generateNewPoint()" /><br/>
	<canvas id="sparkline" style="width: 300px; height: 150px; border: 1px solid black;"></canvas>
	</div>
</div>
</body>
</html>